<template>
    <z-paging>
        <view class="heqader_box">
            <hedsty :headCentext="'编辑资料'"></hedsty>
        </view>
        <view class="touxiang_box" style="background-image: url('https://morgan.dingxians.cn/static/editpic/1.png');">
            <view class="avatar_box">
                <image :src="userInfo.avatar" mode="scaleToFill" />
            </view>
            <view class="xiangji_box" @click="xiugai"
                style="background-image: url('https://morgan.dingxians.cn/static/editpic/3.png');">
            </view>
        </view>
        <view class="bianjiziliao_box"
            style="background-image: url('https://morgan.dingxians.cn/static/editpic/2.png');">
            <view class="dange_box">
                <view class="left_text_box">昵称</view>
                <view class="right_box">
                    <view class="text_box" @click="edName">{{ userInfo.nickname }}</view>
                    <view class="icon_box">
                        <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="14"></u-icon>
                    </view>
                </view>
            </view>
            <view class="dange_box">
                <view class="left_text_box">ID</view>
                <view class="right_box">
                    <view class="text_box">{{ userInfo.id }}</view>
                    <view class="icon_box">
                        <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="14"></u-icon>
                    </view>
                </view>
            </view>

            <view class="dange_box">
                <view class="left_text_box">手机号码</view>
                <view class="right_box">
                    <view class="text_box">{{ userInfo.mobile }}</view>
                    <view class="icon_box">
                        <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="14"></u-icon>
                    </view>
                </view>
            </view>

        </view>

        <u-modal :show="showModal" :showCancelButton="true" title="修改昵称" @cancel="showModal = false" @confirm="confirmAction">
            <!-- 输入框 -->
            <u-input v-model="inputValue"  type="text" placeholder="请输入内容" />
        </u-modal>
        <view class="queren_box" @click="edInfo"
            style="background-image: url('https://morgan.dingxians.cn/static/editpic/4.png');">
            确认修改
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            userInfo: {
                avatar: '',
                nickname: ''
            },
            showModal: false,
            inputValue: ''
        }
    },
    onLoad() {
        this.getInfo()
    },
    onShow() {
    },
    methods: {
        getInfo() {
            this.$Request.get(this.$api.user.users).then(res => {
                if (res.code == 200) {
                    this.userInfo = res.data
                }
            })
        },
        xiugai() {
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album'],
                success: (res) => {
                    uni.showLoading({
                        title: '图片上传中',
                        mask: true
                    })
                    for (var x = 0; x < res.tempFilePaths.length; x++) {
                        uni.uploadFile({
                            url: "https://yq.dingxians.cn/api/common/upload?token=" +
                                uni.getStorageSync("token"),
                            name: 'file',
                            filePath: res.tempFilePaths[x],
                            success: r => {
                                uni.hideLoading()
                                var data = JSON.parse(r.data);
                                this.userInfo.avatar = ''
                                this.userInfo.avatar = data.data.url;
                                
                            }
                        })
                    }
                },
                error: (res) => {
                    console.log(res)
                }
            })
        },
        edName() {
            let that = this
            // #ifndef MP-ALIPAY
            uni.showModal({
                title: '确定修改昵称',
                editable: true,
                placeholderText: '请输入昵称',
                success: function (res) {
                    if (res.confirm) {
                        console.log(res)
                        that.userInfo.nickname = res.content
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
            // #endif
            // #ifdef MP-ALIPAY
            this.showModal = true
            // #endif
        },
        confirmAction(){
            this.userInfo.nickname = this.inputValue
            
            this.showModal = false
        },
        edInfo() {
            let data = {
                nickname: this.userInfo.nickname,
                avatar: this.userInfo.avatar,
            }
            this.$Request.put(this.$api.user.users, data).then(res => {
                if (res.code == 200) {
                    this.Nickshow = false
                    this.$msg('修改成功')
                    this.getInfo()
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.heqader_box {
    width: 750rpx;
    height: 447rpx;



}

.touxiang_box {
    width: 409rpx;
    height: 408rpx;
    background-size: 100% 100%;
    margin: auto;
    margin-top: -202rpx;
    position: relative;
    margin-bottom: 14rpx;

    .avatar_box {
        width: 240rpx;
        height: 240rpx;
        border-radius: 50%;
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        margin: auto;

        image {

            width: 240rpx;
            height: 240rpx;
            border-radius: 50%;
        }
    }

    .xiangji_box {
        width: 56rpx;
        height: 53rpx;
        background-size: 100% 100%;
        position: absolute;
        right: 82rpx;
        bottom: 85rpx;
    }
}

.bianjiziliao_box {
    width: 690rpx;
    margin: auto;
    margin-bottom: 113rpx;
    background-size: 100% 100%;

    .dange_box {
        width: 100%;
        height: 120rpx;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 30rpx;

        .left_text_box {
            height: 120rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 120rpx;
        }

        .right_box {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .text_box {
                height: 120rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #FFFFFF;
                line-height: 120rpx;
            }

            .icon_box {
                height: 120rpx;
                display: flex;
                align-items: center;
                margin-left: 21rpx;
            }
        }
    }
}

.queren_box {
    width: 529rpx;
    height: 120rpx;
    margin: auto;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 120rpx;
    text-align: center;
    background-size: 100% 100%;
    transition: transform 0.3s;
}

.queren_box:active {
    transform: scale(0.8);
}
</style>